<template>
	<view class="songer-list">
		<div class="title-name">
			<slot name="title">
				歌手列表
			</slot>
		</div>
		<ul class="singer-group">
			<li class="singer-item" v-for="(item,index) in singerList" :key="index" @click="toSingerDetails(item)">
				<image class="singer-avatar" :src="item.picUrl" ></image>
				<p class="singer-name">{{item.name}}</p>
			</li>
		</ul>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotSinger: {},
				singerList: [],
			};
		},
		props: {},
		methods: {
			async getSinger() {
				const res = await this.rq.fetchGet(this.apiUrl.hotSinger, {});
				this.singerList = res[1].data.artists;
			},
			toSingerDetails(item){
				console.log(item.id)
				uni.navigateTo({
					url:`/pages/SingerDetails/SingerDetails?id=${item.id}&avatar=${item.picUrl}`
				})
			}
		},
		created() {
			this.getSinger();
		}

	}
</script>

<style lang="scss">
	
	.songer-list {
		.title {
			font-size: .8rem;
			margin: 8px 0px;
			padding-left: 6px;
			border-left: 2px solid #ff3620;
		}

		.singer-group {
			.singer-item {
				display: flex;
				align-items: center;
				font-size: .8rem;
				border-top: 1px solid lighten(gray, 40%);
				padding: .5rem 0;
				.singer-avatar {
					width: 3rem;
					height: 3rem;
					border-radius: 50%;
				}
				.singer-name{
					margin-left: .4rem;
				}
			}
		}
	}
</style>
